<template>
	<view class="mycard" v-if="showData">
		<view class="title">
			我的卡
		</view>
		<view class="cardBox">
			<view :class="yhname">
				<image :src="`${host}${card.bg_image}-t.m90xx`" class="w100 h100"></image>
				<view class="num">{{card.card_no}}
				</view>
			</view>
		</view>
		<view class="updateCard">
			<view class="button" @click="changecard">
				更换银行卡
			</view>
			<text>更换之前绑定的银行卡</text>
		</view>
		<view class="addcard" v-if="!card">
			<view class="button" @click="changecard">
				添加银行卡
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myBank
	} from "../../../apis/shop/api.js"
	export default {
		data() {
			return {
				card: '',
				store_id: "",
				token: "",
				yhname: "",
				showData:false
			}
		},
		computed: {
			host() {
				return this.$baseHost.qiniuHost
			}
		},
		onLoad() {
			// uni.showLoading({
			// 	title: '加载中',
			// 	icon: 'loading',
			// 	mask: true,
			// });
			this.store_id = uni.getStorageSync("store_id");
			this.token = uni.getStorageSync("token");
			this.getData()
		},
		methods: {
			getData() {
				let that = this
				myBank({
					store_id: that.store_id,
					token: that.token
				}).then(res => {
						if (res.code == 1) {
							that.card = res.data.card;
							that.showData=true;
							// uni.hideLoading();
					}
				})
			},
			changecard() {
				uni.navigateTo({
					url: "/pages/shopmanager/cardmanager/changeCard"
				})
			}
		}
	}
</script>

<style lang="less">
	.mycard {
		padding: 30rpx;
	}

	.title {
		font-size: 32rpx;
		color: #333;
		text-align: left;
	}

	.cardBox {
		&>view {
			width: 690rpx;
			height: 300rpx;
			position: relative;
			width: 720rpx;
			height: 330rpx;
			position: relative;
			margin-left: -15rpx;

			.num {
				font-size: 36rpx;
				font-weight: 400;
				position: absolute;
				top: 157rpx;
				left: 150rpx;
				color: #fff
			}
		}
	}

	.updateCard {
		text-align: center;
		margin-top: 30rpx;
		padding: 48rpx 0 20rpx 0;
		box-shadow: 0px 6px 22px 5px rgba(204, 204, 204, 0.36);

		text {
			line-height: 100rpx;
			color: #9A9A9A;
		}
	}

	.addcard {
		margin-top: 30rpx;
	}

	.button {
		width: 546rpx;
		height: 84rpx;
		margin: 0 auto;
		background: rgba(228, 24, 5, 1);
		border-radius: 10rpx;
		text-align: center;
		color: #fff;
		font-size: 34rpx;
		line-height: 84rpx;
	}
</style>
